<template>
    <div class="fxn-detail-info">
        <div class="info-title">
            <div class="title">保全信息</div>
        </div>
        <div class="info-wrap fxn-margin-b-20" v-for="(item,index) in notesData" :key="index">
            <el-descriptions :column="3" border>
                <el-descriptions-item label="保全期限开始时间">{{$filter.dateTime(item.security_start_time)}}</el-descriptions-item>
                <el-descriptions-item label="保全期限结束时间">{{$filter.dateTime(item.security_end_time)}}</el-descriptions-item>
                <el-descriptions-item label="申请保全金额">{{item.security_amount}}</el-descriptions-item>
                <el-descriptions-item label="实际保全金额">{{item.apply_security_amount}}</el-descriptions-item>
                <el-descriptions-item label="保全标的物">{{item.security_thing}}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{item.create_with}}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{$filter.dateTime(item.create_time,1)}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1" border>
                <el-descriptions-item label="备注">{{item.remark}}</el-descriptions-item>
            </el-descriptions>
        </div>
        <el-empty v-if="notesData.length == 0" description="暂无数据" />
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 1,
                page: 1,
                perPage: 10,
                loading: false,
                notesData: [],
            })

            //获取跟进
            const getList = () => {
                state.loading = true;
                proxy.$http.get('/oa/Lawcase/preservations',{
                    page: state.page,
                    perPage: state.perPage,
                    lawcase_id: router.currentRoute.value.query.id
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.notesData = data.list;
                    }
                })
            }
            
            //Dom加载
            onMounted(()=>{
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    .fxn-detail-info{
        margin-top: 20px;
    }

    .fxn-detail-info .info-title{
        margin: 20px 0;
        overflow: hidden;
    }

    .fxn-detail-info .info-title .title{
        float: left;
        color: rgba(46, 60, 179, .9);
        font-weight: bold;
        text-indent: 12px;
        position: relative;
    }

    .fxn-detail-info .info-title .title::after{
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 4px;
        height: 10px;
        background: rgba(46, 60, 179, .9);
    }

    .fxn-detail-info .info-title .btn{
        float: right;
    }

    .fxn-detail-info .info-wrap{
        overflow: hidden;
    }
</style>